<template>
	<view class="loginPage">
		<view class="bgBox"></view>
		<view class="fixed-box">
			<view class="sys-head" view :style="{ height: statusBarHeight+'px' }"></view>
			<view class="header-title">
				<view class="head-wrapper" :style="'top:'+statusBarHeight+'px'">
					<view class="head-menu">
						<view class='iconfont icon-xiangzuo' @click="returns"></view>
					</view>
				</view>
				登录
			</view>
		</view>
		<view class="content-box" :style="'top:'+(43+statusBarHeight)+'px'" >
			<view class="logo flex-aj-center">
				<image src="../../static/images/logo.png" mode=""></image>
				<view>车悦融会员中心</view>
			</view>
			<view class="login flex-aj-center" v-show="!isAgree" @click="confirmLogin" >
				手机号快捷登录
			</view>
			<!-- #ifdef MP -->
			<button open-type="getPhoneNumber" v-show="isAgree" class="flex-aj-center login" @getphonenumber="getphonenumber" >手机号快捷登录</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<input v-show="isAgree" style="text-align: center;" type="number" placeholder="请输入手机号" v-model="phone" />
			<view class="login flex-aj-center" v-show="isAgree" @click="h5Login" >
				登录
			</view>
			<!-- #endif -->
			<view class="agree flex-aj-center" @click="isAgree = !isAgree" >
				<image src="../../static/images/no.png" v-show="!isAgree" mode=""></image>
				<image src="../../static/images/selected.png" v-show="isAgree" mode=""></image>
				已阅读并同意 <navigator url='/pages/about/detail?title=用户协议&type=1'>《用户协议》</navigator> <navigator url="/pages/about/detail?title=隐私政策&type=2">《隐私政策》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWxUserByCode,
		h5Login
	} from "@/api/api.js"
	import Routine from '@/libs/routine';
	export default {
		data(){
			return{
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				isAgree:false,
				phone:''
			}
		},
		methods: {
			h5Login(){
				h5Login({
					phone:this.phone
				}).then(res=>{
					this.$store.commit('LOGIN', {
						token: res.data.token
						// time: time
					});
					this.$store.commit('SETUID', res.data.clientUser.clientUserId);
					this.$store.commit('UPDATE_USERINFO', res.data.clientUser);
					this.$util.Tips({
						title: '登录成功',
						icon: 'success'
					}, {
						tab: 3
					});
				})
			},
			confirmLogin(){
				if(!this.isAgree){
					return this.$util.Tips({
						title:'请先阅读并同意协议'
					})
				}
			},
			returns(){
				uni.navigateBack()
			},
			getphonenumber(e){
				uni.showLoading({ title: '正在登录中' });
				Routine.getCode()
					.then(code => {
						this.getUserPhoneNumber(e.detail.encryptedData, e.detail.iv, code);
					})
					.catch(error => {
						uni.hideLoading();
					});
			},
			// 小程序获取手机号码回调
			getUserPhoneNumber(encryptedData, iv, code) {
				getWxUserByCode({
					encryptedData: encryptedData,
					iv: iv,
					code: code
				}).then(res => {
					console.log("返回数据==",res)
						// let time = res.data.expires_time - this.$Cache.time();
						this.$store.commit('LOGIN', {
							token: res.data.token
							// time: time
						});
						this.$store.commit('SETUID', res.data.clientUser.clientUserId);
						this.$store.commit('UPDATE_USERINFO', res.data.clientUser);
						this.$util.Tips({
							title: '登录成功',
							icon: 'success'
						}, {
							tab: 3
						});
					})
					.catch(err => {
						console.log("错误信息==",err)
						uni.hideLoading();
					});
			},
		},
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped >
	.bgBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 800rpx;
		background-size: cover;
		background-image: url(https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/53321714038997995.png);
	}
	
	.content-box{
		position: relative;
		.logo{
			flex-direction:column;
			margin:240rpx 0  88rpx;
			image{
				width: 128rpx;
				height: 128rpx;
				margin-bottom: 32rpx;
			}
			view{
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #292929;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
			}
		}
		
		.login{
			width: 590rpx;
			height: 96rpx;
			background: #FF2945;
			border-radius: 56rpx;
			margin: 0 auto;
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
		}
		.agree{
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #292929;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			white-space: nowrap;
			navigator{
				color: #FF2945;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
			
		}
	}
	
	.fixed-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	
		.header-title {
			height: 43px;
			display: flex;
			align-items: center;
			justify-content: center;
	
			.head-wrapper {
				z-index: 999;
				display: flex;
				align-items: center;
				position: fixed;
				left: 30rpx;
				top: 0;
				/* #ifdef MP */
				height: 43px;
				/* #endif */
				/* #ifdef H5 */
				height: 114rpx;
	
				/* #endif */
				.head-menu {
					display: flex;
					align-items: center;
					height: 54rpx;
					width: 140rpx;
					
					.iconfont {
						flex: 1;
						text-align: left;
						color: #333;
						box-sizing: border-box;
					}
				}
			}
	
		}
	}
</style>